<template>
    <Modal
            v-model="visible"
            :width="width"
            :title="title"
            :fullscreen="fullscreen"
            :styles="{top:styleTop +'px'}"
    >
        <div slot="header">
            <div class="ivu-modal-header-inner">{{title}}
                <div class="fullscreen" @click="full">
                    <Icon type="ios-contract" v-if="fullscreen"/>
                    <Icon type="ios-expand" v-else/>
                </div>
                <div id="close" @click="cancel">
                    <Icon type="ios-close"/>
                </div>
            </div>
        </div>
        <div slot="close">
        </div>
        <div :style="{height:height}" id="thisBody">
            <slot></slot>
        </div>
        <div slot="footer">
        </div>
    </Modal>
</template>

<script>

    export default {
        name: 'JModal',
        props: {
            title: {
                type: String,
                default: "标题"
            },
            // 可使用 .sync 修饰符
            visible: Boolean,
            // fullscreen: {
            //     type: Boolean,
            //     default: false
            // },
            // 是否允许切换全屏（允许后右上角会出现一个按钮）
            switchFullscreen: {
                type: Boolean,
                default: true
            },
            // 点击确定按钮的时候是否关闭弹窗
            okClose: {
                type: Boolean,
                default: true
            },
            top: {
                type: Number,
                default: 50
            },
            bottom: {
                type: Number,
                default: 50
            },
            width: {
                type: Number,
                default: 800
            }
        },
        data() {
            return {
                styleTop: this.top,
                styleBottom: this.bottom,
                height: "",
                fullscreen: false,

            }
        },
        model: {
            prop: 'visible',
            event: 'close'
        },
        created() {
            this.height = document.documentElement.clientHeight - (this.styleTop + this.styleBottom + 110) + "px";
        },
        methods: {
            full() {
                this.fullscreen = !this.fullscreen;
                if (this.fullscreen) {
                    this.styleTop = 0;
                    this.height = document.documentElement.clientHeight - 70 + "px";
                } else {
                    this.styleTop = this.top;
                    this.height = document.documentElement.clientHeight - (this.styleTop + this.styleBottom + 110) + "px";
                }
            },
            cancel() {
                this.$emit("cancel");
            },


            /** 切换全屏 */
            toggleFullscreen() {
                this.innerFullscreen = !this.innerFullscreen
                //triggerWindowResizeEvent()
            },

        }
    }
</script>

<style scoped>
    #thisBody {
        position: relative;
    }

    /deep/ .ivu-modal-fullscreen .ivu-modal-body {

        top: 51px;
        bottom: 0px;
    }

    .fullscreen {
        z-index: 1;
        font-size: 16px;
        position: absolute;
        right: 45px;
        top: 14px;
        overflow: hidden;
        cursor: pointer;
    }

    #close {
        z-index: 1;
        font-size: 30px;
        position: absolute;
        right: 10px;
        top: 10px;
        overflow: hidden;
        cursor: pointer;
    }
</style>